<template>
<div class="login">
  <div class="title">
    <h1>TEST</h1>
  </div>
  <div><input class="input-username" type="text" placeholder="请输入手机号"></div>
  <div><input class="input-password" type="password" placeholder="请输入密码"></div>
  <div class="btn-group">
    <ul class="btn-ul-group">
      <li><button class="btn-login" type="button" @click="loginHandler">登录</button></li>
      <li><button class="btn-wx-authorize" type="button" @click="wxLoginHandler">微信登录</button></li>
      <li><button class="btn-register" type="button" @click="registerHandler">注册</button></li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      asb: '23',
      name: '程冠希'
    }
  },
  methods: {
    loginHandler() { //登录请求
      const url = '../index/main'
      wx.navigateTo({
        url
      });
    },
    wxLoginHandler() { //微信授权登录请求
      const url = '../shopIndex/main';
      wx.navigateTo({
        url
      });
    },
    registerHandler() { //注册操作
      console.log('wx register');
    }
  }
}
</script>


<style scoped>
.login {
  width: 80%;
  height: 200px;
  /*border:1px solid black;*/
  margin: 30px auto;
}

.login .title {
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  /*border:1px solid green;*/
  display: block;
}

.login .input-username,
.input-password {
  width: 100%;
  height: 36px;
  border: 1px solid grey;
  border-radius: 6px;
}

.login .input-username {
  margin-top: 12px;
}

.login .input-password {
  margin-top: 20px;
}

.btn-group {
  margin-top: 20px;
  width: 100%;
  height: 60px;
}

.btn-group .btn-ul-group {
  width: 100%;
  height: 100%;
}

.btn-group .btn-ul-group .btn-login,
.btn-wx-authorize,
.btn-register {
  width: 80px;
  height: 38px;
  font-size: 0.8em;
}

.btn-group .btn-ul-group .btn-login {
  float: left;
}

.btn-group .btn-ul-group .btn-wx-authorize {
  width: 100px;
  margin-left: 20px;
  float: left;
}

.btn-group .btn-ul-group .btn-register {
  float: right;
}
</style>
